<template>
  <div id="app">
    <transition name="slide">
            <keep-alive include="list">
                <router-view class="ani-pager"></router-view>
            </keep-alive>
        </transition>
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

    .slide-enter {
        transform: translateX(100%);
    }

    .slide-leave-to {
        transform: translateX(-100%);
    }

    .slide-enter-active,
    .slide-leave-active {
        transition: all 0.5s;
    }

    .ani-pager {
        position: absolute;
        left: 0;
        top: 0px;
        width: 100%;
        height: 100%;
        overflow: scroll;
    }
</style>
